<!doctype html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    body {
      background-color: rgb(0, 0, 0);
    }
    video {
      position: absolute;
      top: 0px;
      right: 0px;
      bottom: 0px;
      left: 0px;
      max-height: 100%;
      max-width: 100%;
      margin: auto;
    }
  </style>
  <body>
    <video id="video" controls autoplay></video>
  </body>
  <script>
    async function fetchBase64(url) {
      try {
        const response = await fetch(url)
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`)
        }

        const base64String = await response.text()
        return base64String
      } catch (error) {
        console.error('获取 Base64 失败:', error)
        throw error
      }
    }
    async function downloadBase64AsMp4() {
      try {
        const url =
          'https://upload-pre.esign.cn/eproxy/1111564182/851a7d33-9e93-4600-a975-e05a661e9e81/video06667e8d4f524505a204d2505b7f1733?signature=Frnnvit0KqMKuevbmXmRw2D0A6E%3D&expire=1733738335243&bucket=esignoss'
        const base64String = await fetchBase64(url)
        const videoSrc = `data:video/mp4;base64,${base64String}`

        const videoPlayer = document.getElementById('video')
        videoPlayer.src = videoSrc
        videoPlayer.load() // 重新加载视频以确保更新 src
      } catch (error) {
        console.error('加载视频失败:', error)
      }
    }
    downloadBase64AsMp4()
  </script>
</html>
